<template>
	<view class="tabs-container" :style="{top: `${offsetTop + navBarHeight}px`}">
		<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation>
			<view class="scrollItem" @click="sendTabItem" :class="{active:tabIndex == index}"
				:style="{background:bgColor,color}"
				v-for="(item,index) in tabList" :key="index" :data-current="index">{{item.name}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			color: {
				type: String,
				default: "#333"
			},
			bgColor: {
				type: String,
				default: "#fff"
			},
			offsetTop: {
				type: Number,
				default: 0
			},
			navBarHeight: {
				type: Number,
				//  #ifdef H5 
				default: 44
				// #endif 
				//  #ifndef H5
				default: 0
				// #endif 
			},
			tabList: {
				type: Array,
				default: () => [{
					text: "关注"
				}, {
					text: "推荐"
				}, {
					text: "购物"
				}, {
					text: "穿搭"
				}, {
					text: "情感"
				}, {
					text: "摄影"
				}, {
					text: "直播"
				}]
			}
		},
		data() {
			return {
				tabIndex: 0
			};
		},
		methods: {
			sendTabItem(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				if (this.tabIndex == index) return;
				this.tabIndex = index;
				let item = this.tabList[index];
				this.$emit("onClickTab", item);
			}
		}
	}
</script>

<style scoped lang="scss">
	$saColor: $base_color;

	.tabs-container {
		position: -webkit-sticky;
		position: sticky;
		top: 64px;
		z-index: 99;
		color: #333;
	}

	.scrollWrap {
		height: 40px;
		line-height: 40px;
		width: 100%;
		white-space: nowrap;
		// text-align: center;
		font-size: 16px;
		box-shadow: 0px 0px 24rpx 0px rgba(0, 103, 231, 0.14);
		background-color: #fff;
		padding-left: 10px;

		.scrollItem {
			display: inline-block;
			// width: 25%;
			margin-right: 30px;
		}

		.active {
			color: $saColor !important;
			position: relative;
			font-weight: 600;

			&:after {
				content: "";
				display: block;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 2px;
				background-color: $saColor !important;
			}
		}
	}
</style>
